<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
</head>

<body>
    <div id="root">
        <ul>
            <li v-for="order of orders" :key="order.id">
                {{order.id}} - {{order.status}} - {{order.status | orderStatus}} - {{order.pay | money}}
            </li>
        </ul>
    </div>

    <script src="./libs/vue.js"></script>
    <script>
        // 订单状态映射
        const orderStatusMap = {
            '1': '未付款',
            '2': '等待卖家发货',
            '3': '卖家已发货，等待收货',
            '4': '买家已收货，未评价'
        }
        console.log(orderStatusMap[val])
        new Vue({
            el: '#root',
            data: {
                orders: [{
                    id: 1,
                    status: 1,
                    pay: "399",
                    createTime: '2019/09/03 12:17:25'
                }, {
                    id: 2,
                    status: 2,
                    pay: "299",
                    createTime: '2019/01/03 12:17:25'
                }, {
                    id: 3,
                    status: 4,
                    pay: 3999,
                    createTime: '2019/05/03 12:17:25'
                }, {
                    id: 4,
                    status: 1,
                    pay: 999,
                    createTime: '2019/09/04 12:17:25'
                }]
            },
            filters: {
                orderStatus(val) {
                    return orderStatusMap[val]
                },
                money(val) {
                    return Number(val).toFixed(2)
                }
            }
        })
    </script>
</body>

</html>